<template>
   <div class="app-container calendar-list-container">
        <el-form :inline="true" :model="listQuery" :rules='bindRules' ref="bindForm" label-width="150px" :label-position="labelPosition">
            <div>
                <el-form-item :label="$t('financial.Contract_number')"  prop="contractNo">
                    <el-input clearable v-model="listQuery.contractNo" style="width: 200px;" class="filter-item" placeholder="请输入设备编号" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.City')"  prop="city">
                    <el-input  clearable v-model="listQuery.city" style="width: 200px;" class="filter-item" placeholder="请输入设备编号" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Business_developer_name')" prop="distributors">
                    <el-input  clearable v-model="listQuery.distributors" style="width: 200px;" class="filter-item" placeholder="请输入设备编号" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Business_developerBD_name')"  prop="distributorsBD">
                    <el-input  clearable v-model="listQuery.distributorsBD" style="width: 200px;" class="filter-item" placeholder="请输入渠道商BD名称" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Shop_name')"  prop="storeName">
                    <el-input  clearable v-model="listQuery.storeName" style="width: 200px;" class="filter-item" placeholder="请输入门店名称" >
                    </el-input>
                </el-form-item>
            </div>
             <div>
                <el-form-item :label="$t('financial.Shop_level')"  prop="storeLv">
                    <el-input  clearable v-model="listQuery.storeLv" style="width: 200px;" class="filter-item" placeholder="请输入门店级别" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Level_1')"  prop="firstCategory">
                    <el-input  clearable v-model="listQuery.firstCategory" style="width: 200px;" class="filter-item" placeholder="请输入一级分类" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Level_2')"  prop="twoCategory">
                    <el-input  clearable v-model="listQuery.twoCategory" style="width: 200px;" class="filter-item" placeholder="请输入二级分类" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Examing_Approving_time')" prop="auditDay">
                    <el-date-picker
                        v-model="listQuery.auditDay"
                        type="datetime"
                        :placeholder="$t('financial.Select_time')"
                        value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Delivery_time')" prop="shipmentsDay">
                    <el-date-picker
                        v-model="listQuery.shipmentsDay"
                        type="datetime"
                        :placeholder="$t('financial.Select_time')"
                        value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Receipt_time')"  prop="signTime">
                    <el-date-picker
                        v-model="listQuery.signTime"
                        type="datetime"
                        :placeholder="$t('financial.Select_time')"
                        value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Monthly_new_added_shop')"  prop="signTime">
                    <el-input type="number" clearable v-model="listQuery.month" style="width: 200px;" class="filter-item" placeholder="请输入门店新增月份" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Merchant_online')" prop="signTime">
                    <el-input type="number" clearable v-model="listQuery.days" style="width: 200px;" class="filter-item" placeholder="请输入服务商上线达标天数" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Shop_revenue')"  prop="income">
                    <el-input  type="number" clearable v-model="listQuery.income" style="width: 200px;" class="filter-item" placeholder="请输入门店营收" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Store_division')"  prop="proportion">
                    <el-input  clearable v-model="listQuery.proportion" style="width: 200px;" class="filter-item" placeholder="请输入营收分成" >
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item :label="$t('financial.Settlement_amount')"  prop="amount">
                    <el-input type="number" clearable v-model="listQuery.amount" style="width: 200px;" class="filter-item" placeholder="请输入结算金额" >
                    </el-input>
                </el-form-item>
            </div>
            <el-button class="filter-item" type="primary" v-waves @click="addIncome">{{$t('financial.Confirm')}}</el-button>
        </el-form>
   </div>
</template>

<script>
import { addIncome } from '@/api/financial'
export default {
    name:'financial_addoperating',
    data() {
        return {
            labelPosition: 'left',
            listQuery: {
                contractNo: '',
                city: '',
                distributors: '',
                distributorsBD: '', 
                storeName: '',
                storeLv: '',
                firstCategory: '',
                twoCategory: '',
                auditDay: '',
                shipmentsDay: '',
                signTime: '',
                month: '',
                days: '',
                income: '',
                proportion: '',
                amount: ''
            },
            bindRules:{
                contractNo: [
                    { required: true, message: '请输入合同编号', trigger: 'change' }
                ],
                city: [
                    { required: true, message: '请输入城市', trigger: 'blur' }
                ],
                distributors: [
                    { required: true, message: '请输入渠道商名称', trigger: 'blur' },
                ],
                distributorsBD: [
                    { required: true, message: '请输入渠道商BD名称', trigger: 'blur' },
                ],
                storeName: [
                    { required: true, message: '请输入门店名称', trigger: 'blur' },
                ],
                storeLv: [
                    { required: true, message: '请输入门店级别', trigger: 'blur' },
                ],
                firstCategory: [
                    { required: true, message: '请输入一级分类', trigger: 'blur' },
                ],
                twoCategory: [
                    { required: true, message: '请输入二级分类', trigger: 'blur' },
                ],
                auditDay: [
                    { required: true, message: '请输入审核通过时间', trigger: 'blur' },
                ],
                shipmentsDay: [
                    { required: true, message: '请输入发货时间', trigger: 'blur' },
                ],
                signTime: [
                    { required: true, message: '请输入签收时间', trigger: 'blur' },
                ],
                month: [
                    { required: true, message: '请输入门店新增月份', trigger: 'blur' },
                ],
                days: [
                    { required: true, message: '请输入服务商上线达标天数', trigger: 'blur' },
                ],
                income: [
                    { required: true, message: '请输入门店营收', trigger: 'blur' },
                ],
                proportion: [
                    { required: true, message: '请输入营收分成', trigger: 'blur' },
                ],
                amount: [
                    { required: true, message: '请输入结算金额', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        async addIncome() {
            this.$refs['bindForm'].validate(async (valid) => {
                if(valid){
                    console.log(valid)
                    const { data } = await addIncome(this.listQuery)
                    this.$message({
                        type: 'success',
                        message: `新增成功!`
                    });
                    this.$router.push('/financial/operating')
                }
            })
        }
    }
}
</script>
